﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>博客文章详细</title>
    <script src="~/lib/Newspublis/js/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
    <link rel="stylesheet" href="~/lib/Newspublis/css/details2.css" />
</head>
<body>
    <div id="app" class="detailsbox">
        <div class="detailsleft">
            <div class="lefttop">
                <h2>{{ News.newsTitle }}</h2>
                <div class="lefttext">
                    <div style="width:300px">
                        <img class="lefttext1" src="~/lib/Newspublis/images/时间.png" alt="">
                        <span>{{ News.publishDate }}</span>
                    </div>
                    <div>
                        <img class="lefttext2" src="~/lib/Newspublis/images/35新闻、资讯-线性.png" alt="">
                        <span>{{ NewsType }}</span>
                    </div>
                    <div>
                        <img class="lefttext3" src="~/lib/Newspublis/images/信息-fill.png" alt="">
                        <span>{{ this.NewsComment.length }}</span>
                    </div>
                </div>
            </div>
            <br />
            <div class="content" v-html="News.newsContent" ref="contentContainer"></div>
            <!-- 相关推荐 -->
            <h3>相关推荐</h3>
            <hr>
            <ul class="recommend">

                <a target="_blank" style="text-decoration:none" href="https://blog.csdn.net/dawfwafaew/category_11848118.html">小威编程</a>
            </ul>
            <h3>评论</h3>
            <hr>
            <div class="textarea">
                <textarea v-model="textareaval" placeholder="请输入你的发言" cols="30" rows="10"></textarea>
                <div class="btn">
                    <button v-on:click="release">发布</button>
                </div>
            </div>
            <!-- 留言 -->
            <div class="Leaving">
                <div class="message" v-for="(item, index) in NewsComment" :key="index">
                    <div>
                        <span class="titles">匿名 </span> <span class="messagetesxt">{{ item.createTime }}</span>
                        <pre>{{ item.content }}</pre>
                    </div>
                    <div class="Serial">#{{ index + 1 }}</div>
                </div>
            </div>
        </div>
        <button v-on:click="reload" class="dohua" style="position: fixed; right: 100px; top: 57%; display: block; width: 50px; height: 50px; border: 1px solid #e2e2e2; margin-bottom: 10px; cursor: pointer; text-align: center; line-height: 15px; color: #666; background: #fff; transition: all .3s ease-out;">刷新</button>
        <button class="dohua" style="position: fixed; right: 100px; top: 65%; display: block; width: 50px; height: 50px; border: 1px solid #e2e2e2; margin-bottom: 10px; cursor: pointer; text-align: center; line-height: 15px; color: #666; background: #fff; transition: all .3s ease-out;">设置</button>
        <button class="dohua" style="position: fixed; right: 100px; top: 73%; display: block; width: 50px; height: 50px; border: 1px solid #e2e2e2; margin-bottom: 10px; cursor: pointer; text-align: center; line-height: 15px; color: #666; background: #fff; transition: all .3s ease-out;">用户反馈</button>
    </div>

    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    textareaval: "",
                    News: {},
                    NewsComment: [],
                    NewsType: '',
                    BlogContent: ''
                };
            },
            watch: {
                // 当BlogContent的值发生变化时，执行回调函数
                BlogContent() {
                    // 使用nextTick来确保在DOM更新完成后执行回调函数
                    this.$nextTick(() => {
                        // 调用removeBackgroundColor方法移除背景颜色
                        this.removeBackgroundColor();
                    });
                },
                // 当News对象的newsContent属性发生变化时，执行回调函数
                'News.newsContent'() {
                    // 使用nextTick来确保在DOM更新完成后执行回调函数
                    this.$nextTick(() => {
                        // 调用removeBackgroundColor方法移除背景颜色
                        this.removeBackgroundColor();
                    });
                }
            },
            methods: {
                 // 新增：为每个代码块添加复制按钮
        addCopyButtons() {
            const codeBlocks = this.$el.querySelectorAll('.editor-colors');
            codeBlocks.forEach(block => {
                // 检查是否已添加过按钮
                if (!block.querySelector('.copy-btn')) {
                    const btn = document.createElement('button');
                    btn.className = 'copy-btn';
                    btn.textContent = '复制';
                    btn.style = `
                        position: absolute;
                        top: 5px;
                        right: 10px;
                        padding: 2px 8px;
                        background: #4CAF50;
                        color: white;
                        border: none;
                        border-radius: 3px;
                        cursor: pointer;
                    `;
                    block.style.position = 'relative';
                    block.appendChild(btn);
                }
            });
        },
                reload() {
                    location.reload();
                },
                release() {
                    let Mytime = new Date();
                    this.NewsComment.unshift({
                        content: this.textareaval,
                        createTime: Mytime.toLocaleString()
                    });
                    let id = localStorage.getItem("NewsId");
                    axios.post('/News/NewsComment', {
                        NewsId: parseInt(id),
                        Content: this.textareaval
                    }).then(res => {
                        console.log(res);
                    });
                    this.textareaval = "";
                },
               // 修改后的复制方法
        copyToClipboard(event) {
            // 确保点击的是复制按钮
            if (event.target.classList.contains('copy-btn')) {
                const codeBlock = event.target.parentNode.querySelector('pre');
                const textToCopy = codeBlock.innerText;

                navigator.clipboard.writeText(textToCopy)
                    .then(() => {
                        event.target.textContent = '✓ 已复制';
                        setTimeout(() => {
                            event.target.textContent = '复制';
                        }, 2000);
                    })
                    .catch(err => {
                        console.error('复制失败:', err);
                        event.target.textContent = '! 失败';
                        setTimeout(() => {
                            event.target.textContent = '复制';
                        }, 2000);
                    });
            }
        },

                //去除富文本格式自带的样式背景
                removeBackgroundColor() {
                    // 获取渲染 HTML 内容的容器
                    const container = this.$refs.contentContainer;

                    // 查询所有包含 'background-color:White;' 样式的 div 元素
                    const divs = container.querySelectorAll('div[style*="background-color:White;"]');

                    // 遍历所有符合条件的 div 元素
                    divs.forEach(div => {
                        // 移除背景颜色属性
                        div.style.removeProperty('background-color');

                        // 添加文本颜色为白色的样式
                        div.style.color = '#fff';
                    });
                },
                loadNews() {
                    let id = localStorage.getItem("NewsId");
                    axios.post('/News/GETNewsComment', { NewsId: parseInt(id) })
                        .then(res => {
                            this.NewsComment = res.data.data;
                        });

                    axios.post('/News/GetsingleNews', { Id: parseInt(id) })
                        .then(res => {
                            if (res.data.code == 200) {
                                this.News = res.data.data;
                                this.BlogContent = this.News.newsContent;
                                this.$nextTick(() => {
                                    this.removeBackgroundColor();
                                    document.querySelectorAll('pre code').forEach((block) => {
                                        hljs.highlightBlock(block);
                                    });
                                    // 添加复制按钮
                                  this.addCopyButtons();

                                    // 设置点击事件监听器
                                    const editorColors = document.querySelectorAll('.editor-colors');
                                    console.log('editorColors类名获取', editorColors);
                                    if (editorColors) {
                                        editorColors.addEventListener('click', this.copyToClipboard);
                                    }
                                });
                                axios.post('/News/GetNewsType', { TypeId: this.News.infoType })
                                    .then(res => {
                                        this.NewsType = res.data;
                                    });
                            }
                        }).catch(err => {
                            console.log(err);
                        });
                }
            },
            mounted() {
                 // 添加全局点击监听
        document.addEventListener('click', this.copyToClipboard.bind(this));
                this.loadNews();
            },
                   beforeDestroy() {
            // 移除事件监听
            document.removeEventListener('click', this.copyToClipboard);
        }
        });
    </script>
</body>
</html>
